<template>
  <div>
    <!-- <p>教师介绍</p> -->
      <Bread />
    <div class="main">
      <div class="left">  
        <div class="photo">
          <img src="../../assets/img/wx (2).png" alt="">
          <p>张豪</p>
          <span>低级外教</span>
        </div>
        <div class="hang">
          <span>加入时间</span><span>2020-12</span>
        </div>
        <div class="hang">
          <span>工龄</span><span>20年</span>
        </div>
        <div class="hang">
          <span>学生</span><span>1000</span>
        </div>
        <div class="hang">
          <span>性别</span><span>女</span>
        </div>
        <div class="hang">
          <span>教育</span><span>博士学位</span>
        </div>
        <div class="hang">
          <span>联系电话</span><span>1234567890</span>
        </div>
        <div class="hang">
          <span>电子邮箱</span><span>2060926856@qq.com</span>
        </div>
        <div class="hang">
          <span>联系地址</span><span>北京市海淀区蓝靛厂路沁馨源</span>
        </div>
      </div>
      <div class="right">
        <div class="right-top">
          <p>关于老师</p>
          <div>&nbsp;&nbsp;&nbsp;&nbsp;是一位深受学生喜爱和信任的好老师!老师英语专业学士,英语专业八级。具有丰富的耶鲁视线英语教学经验。善于发现孩子的性格特点,抓住孩子的学习兴趣。
</div>
        </div>
      <div class="san">
        <div class="san-1">
          <p>10000小时</p><br><span>累计授课时长</span>
        </div>
        <div class="san-2">
          <p>120项</p><br><span>累计获奖次数</span>
        </div>
        <div class="san-3">
          <p>8520条</p><br><span>累计好评数量</span>
        </div>
      </div>
      <div class="bot">
        <div class="bot-l">
          <div>教师介绍</div>
          <p>&nbsp;&nbsp;&nbsp;&nbsp; 英语专业学士，英语专业八级，语感和英文表达能力比较强。从事少儿英语教学工作多年，经验丰富。热爱少儿英语教育，善于观察孩子学习中的优点与潜力，并将自己发现的问题与家长沟通、有针对性地帮助孩子提高。很欣赏也一直实践着童话大王郑渊洁的一句话“好孩子都是鼓励出来的! <br>
&nbsp;&nbsp;&nbsp;&nbsp; 长期从事于少儿英语教学工作，有丰富的授课经验。英语功底扎实，发音标准，表达流利。性格活泼开朗，对孩子饱含热情与爱心，善于与孩子交流。讲课思路清晰，认真负责，深受小朋友和家长的喜爱!“永远用欣赏的眼光看学生，永远用宽容的心态面对学生! ” <br>
&nbsp;&nbsp;&nbsp;&nbsp; 学生眼里的我，是一个自然优雅、充满热情、热爱生活、热爱学生、热爱教育工作的好老师。他们说:"您的热情点燃我们每一个人对生活的爱，您教学的严谨，鞭策我们每一个人认真求知，您优雅的举止，影响我们每一个人去追求心灵的高贵"。在学生眼里，我是那个课堂上激情四射、知识渊博，对自己的教与他们的学近乎严苛的师长;是一个课堂外坦率随性，可以海阔天空畅聊天下的朋友;是那私底下细心关怀，能诉心声的知己。他们说，在人生这样一段特殊的经历中，有一位您这样的教师。是无比幸运和幸福的。
</p>
        </div>
        <div class="bot-r">
            <p>工作专长</p>
            <span>英语</span>
            <div class="quan"><el-progress type="circle" :percentage="90" :stroke-width="10" :width="100" color="#ffc142"></el-progress></div>
            <span>法语</span>
            <div class="quan"><el-progress type="circle" :percentage="50" :stroke-width="10" :width="100" color="#976ff8"></el-progress></div>
            <span>中文</span>
            <div class="quan"><el-progress type="circle" :percentage="40" :stroke-width="10" :width="100" color="#438afe"></el-progress></div>
        </div>
      </div>
      </div>
    </div>
  </div>
</template>

<script>
import Bread from '../teacheruser/newTeacher/components/Bread.vue'
export default {
  components:{
      Bread
  }
}
</script>

<style lang="less" scoped>
  .main{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    .left{
      width: 500px;
      height: 790px;
      background-color: #fff;
      margin-right: 20px;
    }
    .right{
      width: 710px;
      height: 790px;
      .right-top{
      height: 116px;
      width: 100%;
      border-radius: 10px;
      background-color: #fff;
      margin-bottom: 20px;
      p{
        margin-bottom: 20px;
        padding-top: 20px;
        padding-left: 16px;
        color: #1c1e1e;
      }
      div{
        padding-left: 16px;
        line-height: 24px;
        color: #1c1e1e;
      }
    }
    }
    .photo{
      height: 300px;
      width: 100%;
      background-color: #03d3c6;
      border-radius: 10px;
      position: relative;
      color: #fff;
      p{
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translateX(-50%);
      }
      span{
        position: absolute;
        top: 69%;
        left: 50%;
        transform: translateX(-50%);
        color: #fff;
      }
      img{
        width: 140px;
        height: 140px;
         position: absolute;
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 50%;
      }
    }
    .hang{
      height: 60.3px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      line-height: 60px;
      border-bottom: 1px solid #cfe8e8;
      span{
        padding: 0 28px;
        color: #333;
      }
    }
    .san{
      height: 116px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      // color: #fff;
      .san-1,.san-2,.san-3{
        width: 220px;
        height: 115px;
        background-color: #ffc142;
        border-radius: 10px;
        color: #fff;
        span{
          margin-left: 90px;
          line-height: 30px;
        color: #fff;
        }
        p{
          margin-top: 30px;
          margin-left: 20px;
          font-size: 20px;
        }
      }
      .san-2{
        width: 220px;
        height: 115px;
        background-color: #976ff8;
        border-radius: 10px;
      }
      .san-3{
        width: 220px;
        height: 115px;
        background-color: #438afe;
        border-radius: 10px;
      }
    }
    .bot{
      width: 100%;
      height: 65%;
      display: flex;
      justify-content: space-between;
      .bot-l{
        width: 480px;
        height: 100%;
        background-color: #fff;
        border-radius: 10px;
        padding: 0px 20px;
        p{
          line-height: 24px;
          color: #666;
        }
        div{
          margin-bottom: 20px;
          padding-top: 20px;
          color: #1c1e1e;
          font-size: 20px;
        }
      }
      .bot-r{
        width: 150px;
        height: 100%;
        background-color: #fff;
        border-radius: 10px;
        p{
          margin: 30px 20px;
        color: #1c1e1e;

        }
        span{
          margin: 0px 20px;
          color: #666;
        }
        div{
          margin: 8px 13px;
        }
      }
    }
  }
</style>